@include b(table-filter) {
  @include e(search) {
    display: flex;
    flex-direction: column;

    @include media-breakpoint-up(md) {
      flex-direction: row;
    }
  }

  @include e(search-input) {
    width: 100%;
    margin: 0 0 12px;

    @include media-breakpoint-up(md) {
      flex: 1 0 0;
      max-width: 18em;
      margin: 0 12px 0 0;
    }
  }

  @include e(button-container) {
    @include polyfill-gap(12px, 8px);

    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  @include e(filter) {
    & + & {
      margin-top: 8px;
    }
  }

  @include e(filter-label) {
    display: block;
    margin-bottom: 2px;
    font-size: 0.775em;
    color: var(--#{$rd-prefix}text-color-sub);
  }
}
